<script>
export default {
  name: "pageA",
  methods:{
    toPageB(){
      console.log(this.$router)
      //this.$router.push('pageB')  //跳转到pageB
      // this.$router.push({
      //       path:'/pageB',
      //       query:{
      //         id:999
      //       }
      //     })
      this.$router.push({
        name:'pageC',
        params:{
          ids:666
        }
      })
      // this.$router.replace()  删除页面栈
      // this.$router.go(n)    n是数字，正数是前进，负数是后退，0是刷新
      // this.$router.back()    返回
      // this.$router   接收参数
    }
  }
}
</script>

<template>
<!--
    路由的跳转：
        1、声明式：router-link标签
          to属性里是对象，{path:路径，query:传递的参数}
          里面是name：定义在路由里的name属性，params:传递的参数
          但是传递的参数的属性名要写在路由里面 用/:链接
-->
<div>
  1111
  <router-link to="/pageB">pageB</router-link>
  <router-link to="/pageB?id=100">pageBB</router-link>

<!--  声明式-->
  <router-link to="{path:'/pageB',query:{id:100}">pageBBB</router-link>

  <router-link to="{name:'pageC',params:{ids:200}">pageC</router-link>

<!--  函数式-->
  <button @click="toPageB">toPageB</button>
</div>
</template>

<style scoped lang="less">

</style>